<template>
  <view class="activity-box">
    <view class="head">
      <view>
        <text class="title">{{props.data.activityName}}</text>
        <text class="subTitle" v-if="props.data.showSubtitle">({{props.data.totalReward}})</text>
      </view>
      <view class="operate" v-if="props.data.url || props.operateButton" @click="jumpH5Url(props.data.url)">
        <text class="text" v-if="props.operateText">{{props.operateText}}</text>
        <!-- <text>></text> -->
        <uni-icons type="forward" size="14" color="#cccccc"></uni-icons>
      </view>
    </view>
    <view class="content">
      <template v-for="item in props.data?.tasks||[]" :key="item.taskId">
        <view class="item">
          <image class="img" :src="item.image"></image>
          <view class="info">
            <text class="text taskname">{{item.taskName}}</text>
            <text v-for="label in item.label" :key="label.id" class="text label" :style="{color: label.colour, border: '1rpx solid '+label.colour}">{{label.name}}</text>
            <br>
            <text class="text rewardShow">{{item.rewardShow}}</text>
            <image class="icon" :src="item.icon"></image>
            <text class="text process">{{item.rewardContent}}</text>
          </view>
          <view class="operate" v-if="item.isEnd===1 || (item.isEnd===0 && item.isJump===1)">
            <template v-if="item.isEnd===1">
              <view class="btn grey">已结束</view>
            </template>
            <template v-else-if="item.isEnd===0 && item.isJump===1">
              <view class="btn orange" v-if="item.isComplete === 0" @click="dealJumpUrl(item)">去完成</view>
              <view class="btn grey" v-else-if="item.isComplete === 1">已完成</view>
            </template>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  operateText: { // 头部按钮文字
    type: String,
    default: ''
  },
  operateButton: { // 是否显示头部按钮
    type: Boolean,
    default: false
  },
  operateAuto: { // 是否自动处理url，否:emit('headClick'),是:jumpUrl(url)
    type: Boolean,
    default: true
  },
  showSubtitle: { // 是否显示副标题
    type: Boolean,
    default: true
  }
})
const dealJumpUrl = (item) => {
  if (item.jumpType === 'APP') {
    jumpAPPUrl(item.jumpTarget, props.data.topicTagId)
  } else if (item.jumpType === 'H5') {
    jumpH5Url(item.jumpTarget)
  }
}
const emit = defineEmits(['headClick'])
const jumpH5Url = (url) => {
  if (!props.operateAuto) {
    emit('headClick')
    return
  }
  if (!url) return
  if (url.indexOf('http') === -1) {
    uni.navigateTo({
      url,
      fail: () => {
        uni.switchTab({ url })
      }
    })
  } else {
    uni.navigateTo({
      url: '/activity/webUrl?url=' + encodeURIComponent(url)
    })
  }
}
const jumpAPPUrl = (type, topicTagId) => {
  // {key: 1,name:"首页"},
  // {key: 2,name:"创作-选择素材"},
  // {key: 3,name:"个人主页-编辑资料"},
  const addParams = topicTagId ? ('?topicTagId=' + topicTagId) : ''
  switch (type) {
    case '1': uni.switchTab({ url: '/pages/index' })
      break
    case '2': uni.navigateTo({ url: '/user/deliverWorks' + addParams })
      break
    case '3': uni.navigateTo({ url: '/user/editData' })
      break
  }
}
</script>

<style scoped lang="scss">
.activity-box{
  background-color: #ffffff;
  border-radius: 12rpx;
  margin: 24rpx 0;
  padding: 12rpx 0;
  >.head{
    height: 68rpx;
    line-height: 68rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8rpx 24rpx;
    >.operate{
      vertical-align: middle;
    }
    .title{
      font-size: 30rpx;
      font-weight: bold;
      margin-right: 16rpx;
      color: #333333;
    }
    .subTitle{
      color: #999999;
      font-size: 26rpx;
    }
    .text{
      color: #666666;
      font-size: 24rpx;
      margin-right: 12rpx;
    }
  }
  >.content{
    padding: 0 24rpx;
    .item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 0;
      &:not(:first-child){
        border-top: 1rpx solid #f2f2f2;
      }
      .img{
        width: 80rpx;
        height: 80rpx;
        border-radius: 80rpx;
      }
      .info{
        flex: 1;
        text-align: left;
        padding: 0 16rpx;
        .text {
          display: inline-block;
        }
        .text,.icon{
          vertical-align: middle;
          margin-right: 8rpx;
        }
        .taskname{
          font-size: 28rpx;
        }
        .label{
          border-radius: 60rpx;
          font-size: 20rpx;
          padding: 0 12rpx;
          font-weight: bold;
        }
        .rewardShow{
          color: #999999;
          font-size: 24rpx;
        }
        .icon{
          width: 36rpx;
          height: 34rpx;
        }
        .process{
          color: #999999;
          font-size: 24rpx;
        }
      }
      .operate{
        width: 160rpx;
        text-align: right;
        .btn{
          display: inline-block;
          padding: 8rpx 24rpx;
          border-radius: 60rpx;
          text-align: center;
          font-size: 28rpx;
          color: #ffffff;
        }
        .orange{
          background-color: #EE751E;
        }
        .grey{
          background-color: #DCDCDC;
        }
      }
    }
  }
}
</style>
